import React, { Component } from 'react';
import style from './login.module.css'
import { Dropdown } from 'antd';
import $ from 'jquery';
import {withRouter} from 'react-router-dom';
import cookie from 'react-cookies'
class Login extends Component {
  constructor(props) {
    super(props);
    console.log(this.props)
    // console.log(window.initGeetest)
  }

  inlogin = true

  onVisibleChange = (visible) => {
    console.log(visible)
  }

  gologin=(idx)=>{
    const initGeetest = window.initGeetest;
    const that = this;
    if(this.inlogin){
      this.inlogin = false;
      $.ajax({
        url: "/libraries", 
        type: "get",
        dataType: "json",
        data:{
          t:(new Date()).getTime() // 加随机数防止缓存
        },
        success: function (data) {
            initGeetest({
                // 以下 4 个配置参数为必须，不能缺少
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                product: "bind", // 产品形式，包括：float，popup
                width: "300px",
            }, function (captchaObj) {
              captchaObj.onReady(function () {
                captchaObj.verify();
                that.inlogin = true;
              }).onSuccess(function () {
                $.ajax({
                  url:'/login',
                  type:'POST',
                  dataType:'json',
                  data:{
                    act:idx==1?'login':'register',
                    username:$("input[name='username']").val(),
                    password:$("input[name='password']").val(),
                  },
                  success:(e)=>{
                    console.log(e)
                    alert(e.msg)
                    if(e.status == 1){
                      cookie.save('mid',e.mid,{maxAge: 3600*24,})
                      that.props.history.push({   
                        pathname: '/home/system',
                        state:{mod:'login',p_key:'sub1',selectedKeys:'/home/system'}
                      });
                    }
                  }
                })
              })
          });
        }
      });
    }
  }

  render() { 
    const menu = (
      <div className={style.msg_div}>
        <p>电话：400-0791-666</p>
        <p>邮箱：ask@baidujx.com</p>
        <span></span>
      </div>
    );
    return (
      <div className={style.login}>
        <div className={style.logo}>
          <img src={require('../common/images/login_logo.png')} alt=""/>
          <span>华邦网站管理中心，客户网站统一管理平台，极致，高效。</span>
        </div>
        <form className='login_form'>
          <div className={style.gologin}>
            <div className={style.gologin_div}>
              <span>账号</span>
              <input name='username' type="text" placeholder='账号'/>
            </div>
            <div className={style.gologin_div}>
              <span>密码</span>
              <input name='password' type="password" placeholder='请输入密码'/>
            </div>
            <div className={style.btn_two}>
              <button type='button' id="go_login" className={style.button} onClick={this.gologin.bind(this,1)}>登录</button>
              <button type='button' className={style.buttons} onClick={this.gologin.bind(this,2)}>注册</button>
            </div>
            <div className={style.username}>
              <span>还没有账号？</span>
              <Dropdown onVisibleChange={this.onVisibleChange} overlay={menu} placement="topLeft">
                <p className={style.msg}>立即联系管理员</p>
              </Dropdown>
            </div>
          </div>
          {/* <input type="hidden" name='act' value='login' /> */}
        </form>
        <img className={style.imgleft} src={require('../common/images/login_logo01.png')} alt=""/>
        <img className={style.imgright} src={require('../common/images/login_logo02.png')} alt=""/>
      </div>
    ); 
  }
}
 
export default withRouter(Login);